/**
 * Created by IntelliJ IDEA.
 * User: shin1ogawa
 * Date: Feb 5, 2011
 * Time: 6:44:54 PM
 * To change this template use File | Settings | File Templates.
 */

/**
 * global variable.
 * constructor of ExamplePage will be setted.
 */
$$.ExamplePage = null;

define(['ExamplePage'], function() {
    /**
     * @constructor
     */
    function ExamplePage() {
        this.listPanel = null;
        this.detailPanel = null;
        this.idText = null;
        this.nameText = null;
        this.longTextArea = null;
        this.detailSubmit = null;
        this.form = null;
    }

    /**
     * @param onSuccess {function}
     * @param onError {function}
     * @param onComplete {function}
     */
    ExamplePage.prototype.getList = function(onSuccess, onError, onComplete) {
        $$.ajax({
            url: '/exampleModel', type: 'get',
            success: function(data, dataType) {
                onSuccess(data, dataType)
            },
            error: function(xhr, status, error) {
                if (onError) {
                    onError(xhr, status, error);
                }
            },
            complete: function(xhr, status) {
                if (onComplete) {
                    onComplete(xhr, status);
                }
            }
        });
    };

    /**
     * @param id {string}
     * @param onSuccess {function}
     * @param onError {function}
     * @param onComplete {function}
     */
    ExamplePage.prototype.get = function(id, onSuccess, onError, onComplete) {
        $$.ajax({
            url: '/exampleModel?id=' + id, type: 'get',
            success: function(data, dataType) {
                onSuccess(data, dataType)
            },
            error: function(xhr, status, error) {
                if (onError) {
                    onError(xhr, status, error);
                }
            },
            complete: function(xhr, status) {
                if (onComplete) {
                    onComplete(xhr, status);
                }
            }
        });
    };

    /**
     *
     * @param data {object}
     * @param onSuccess {function}
     * @param onError {function}
     * @param onComplete {function}
     */
    ExamplePage.prototype.postData = function(data, onSuccess, onError, onComplete) {
        $$.ajax({
            url: '/exampleModel', type: 'post',
            dataType: 'json', contentType: 'application/json', processData: false,
            data: JSON.stringify(data),
            success: function(data, dataType) {
                onSuccess(data, dataType)
            },
            error: function(xhr, status, error) {
                if (onError) {
                    onError(xhr, status, error);
                }
            },
            complete: function(xhr, status) {
                if (onComplete) {
                    onComplete(xhr, status);
                }
            }
        });
    };

    /**
     * @param listOfExampleModel
     */
    ExamplePage.prototype.renderList = function(self, listOfExampleModel) {
        self.listPanel.children('table').remove();
        var table = $('<table/>').appendTo(self.listPanel);
        $('<thead><tr><th>key</th><th>name</th></tr></thead>').appendTo(table);
        var tbody = $('<tbody/>').appendTo(table);

        $.each(listOfExampleModel, function(index, row) {
            var tr = $('<tr/>').appendTo(tbody).click(function(event) {
                self.onRowClick(self, row.key);
            });
            $('<td/>').appendTo(tr).text(row.key);
            $('<td/>').appendTo(tr).text(row.name);
        });
    };

    /**
     *
     * @param self
     * @param key
     */
    ExamplePage.prototype.onRowClick = function(self, key) {
        self.get(key, function(data, dataType) {
            self.render1(self, data);
            self.setDisableStateForDetailSubmit({ data: self });
        });
    };

    /**
     * 
     * @param self
     * @param exampleModel
     */
    ExamplePage.prototype.render1 = function(self, exampleModel) {
        self.idText.val(exampleModel.key);
        self.nameText.val(exampleModel.name);
        self.longTextArea.val(exampleModel.longText);
    };

    ExamplePage.prototype.setDisableStateForDetailSubmit = function(event) {
        var self = event.data;
        if ($$.isNotEmpty(self.idText.val())
                && $$.isNotEmpty(self.nameText.val())
                && $$.isNotEmpty(self.longTextArea.val())) {
            self.detailSubmit.attr('disabled', false);
        } else {
            self.detailSubmit.attr('disabled', true);
        }
    };

    ExamplePage.prototype.onDetailSubmit = function(event) {
        var self = event.data;
        var data = {
            key: self.idText.val(),
            name: self.nameText.val(),
            longText: self.longTextArea.val()
        };
        self.postData(data,
                function (data, dataType) {
                    $$.alert('success!');
                    self.idText.val('');
                    self.nameText.val('');
                    self.longTextArea.val('');
                    self.refreshList(self);
                },
                function (xhr, status, error) {
                    $$.alert('failure!');
                },
                function (xhr, status) {
                    self.idText.focus();
                });
        event.preventDefault();
    };

    /**
     * @param self {object} instance of ExamplePage.
     */
    ExamplePage.prototype.setUpGui = function(self) {
        self.detailSubmit.attr('disabled', true);
        self.idText.bind('change', self, this.setDisableStateForDetailSubmit);
        self.nameText.bind('change', self, this.setDisableStateForDetailSubmit);
        self.longTextArea.bind('change', self, this.setDisableStateForDetailSubmit);
        self.form.bind('submit', self, this.onDetailSubmit);
    };

    /**
     * @param self {object} instance of ExamplePage.
     */
    ExamplePage.prototype.refreshList = function(self) {
        self.listPanel.toggleClass('loading');
        this.getList(function(data) {
            self.renderList(self, data);
        }, function() {

        }, function() {
            self.listPanel.toggleClass('loading');
        });
    };

    /**
     * onLoad.
     */
    ExamplePage.prototype.onLoad = function () {
        this.setUpGui(this);
        this.refreshList(this);
    };

    $$.ExamplePage = ExamplePage;
    return ExamplePage;
});
